<script setup lang="ts">
import {
  businessListShopItems,
  customerAddOrder,
  customerBrowseShopItem,
  customerSelectShopItem,
  listShops
} from "../network/api.ts";
import {computed, reactive, ref} from "vue";
import Footer from "../components/BusinessFooter.vue";
import BusinessFooter from "../components/BusinessFooter.vue";
import CustommerFooter from "../components/CustommerFooter.vue";
import router from "../Router";
import {useRoute} from "vue-router";
import {CirclePlus, Minus, Plus} from "@element-plus/icons-vue";
const route = useRoute()

let username = ref()
let shopItemArr = ref([]);

username.value = sessionStorage.getItem("username")
customerBrowseShopItem(route.query.shopId).then(res=>{
  // console.log(res.data.shopItems)
  shopItemArr.value = res.data
  for(let i = 0; i<shopItemArr.value.length; i++){
    shopItemArr.value[i].quantity = ""
  }
  console.log("shopItemArr.value:")
  console.log(shopItemArr.value)
})
function toPayPage(){
  customerAddOrder(
      sessionStorage.getItem("userId"), route.query.shopId).then(res=>{
        let orderId = ref()
    orderId.value = res.data.id
    for(let shopItem of shopItemArr.value){
      if(shopItem.quantity !=''){
        customerSelectShopItem(
            sessionStorage.getItem("userId"), route.query.shopId,
            orderId.value,shopItem.item.id,shopItem.quantity
        ).then(res=>{
          console.log(res.data)
          router.push({
            path:"/customer/pay",
            query:{
              shopId:route.query.shopId,
              orderId:orderId.value,
              payStatus:0
            }
          })
        })
      }
    }


  })
}
function plus(index,row){
  if(row.quantity !=''){
    shopItemArr.value[index].quantity = row.quantity+1
    return
  }
  shopItemArr.value[index].quantity = 1
}
function minus(index,row){
  if(row.quantity-1 > 0 ){
    shopItemArr.value[index].quantity = row.quantity-1
    return
  }
  shopItemArr.value[index].quantity = ""
}
let totalPrice = computed(()=>{
  let total = 0
  for(let shopItem of shopItemArr.value){
    if(shopItem.quantity !=''){
      total += shopItem.quantity*shopItem.price
    }
  }
  return total
})
</script>

<template>

  <header class="w-full title flex justify-center items-center bg-orange-3 border-orange-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}} 来</p>
      <h1>Browse</h1>
      <p>{{ route.query.shopName }}</p>
      <h1>items</h1>
    </div>
  </header>
  <div class="h-10vw w-full px-1vw flex justify-between items-center h-10vw mb-2vw  mt-5vw">
    <div class="gap-2vw grow h-10vw flex justify-start items-center font-light text-orange-6 text-5vw">
      <p class="">current</p>
      <p v-show="totalPrice!=0">{{totalPrice}}元</p>
    </div>
    <div class="w-23vw">
      <el-button type="warning" color="#fdba74"
                 @click="toPayPage"
                 :disabled="totalPrice==0"
      >
        <div class="text-white">创建订单</div>
      </el-button>
    </div>

  </div>

  <el-table :data="shopItemArr" height="100%" style="width:100% "
            class="select-none"
  >
    <el-table-column type="index" width="1"/>
    <el-table-column  prop="shopItemName" label="商品名称" width="150" align="center"/>
    <el-table-column prop="price" label="价格/元" width="80" align="center"/>
    <el-table-column label=""  width="40" align="left">
      <template #default="scope">
        <div class="rounded-full w-5vw bg-orange-3 h-5vw flex justify-center items-center
                    hover:bg-orange-4"
             @click="minus(scope.$index,scope.row)"
             v-show="shopItemArr[scope.$index].quantity!=''"
        >
          <el-icon color="white"><Minus /></el-icon>
        </div>
      </template>
    </el-table-column>
    <el-table-column  prop="quantity" label="已选数量" width="55" align="center"/>
    <el-table-column label=""  width="40" align="left">
      <template #default="scope">
        <div class="rounded-full w-5vw bg-orange-3 h-5vw flex justify-center items-center
                    hover:bg-orange-4"
             @click="plus(scope.$index,scope.row)"
        >
          <el-icon color="white"><Plus /></el-icon>
        </div>
      </template>
    </el-table-column>


  </el-table>

  <custommer-footer></custommer-footer>


</template>

<style scoped>

</style>